Day 17: React Testing Library - getAllBy** 與其他 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 18

自我挑戰組

Unit Test 學習路系列第 18 篇

Day 17: React Testing Library - getAllBy** 與其他

15th鐵人賽

joannachen

2023-10-03 12:04:42

229 瀏覽

分享至

前兩天練習了 getBy** 系列，取得單一 DOM node。
若要一次取得多個 DOM nodes，我們可以快速使用以下表格直接舉一反八：

RTL Queries** 統整表

Priority Query Order	取得單一節點	取得多個節點	用途
1.	`getByRole`	`getAllByRole`	依據屬性 `role` 取得對應 DOM node。
2.	`getByLabelText`	`getAllByLabelText`	依據 `<label>` text value 取得對應 DOM node。
3.	`getByPlaceholderText`	`getAllByPlaceholderText`	依據 placeholder text value 取得對應 DOM node。
4.	`getByText`	`getAllByText`	依據 HTML Element text value 取得對應 DOM node。
5.	`getByDisplayValue`	`getAllByDisplayValue`	依據 HTML Element 預設值或模擬更新值取得對應 DOM node。
6.	`getByAltText`	`getAllByAltText`	依據屬性 `alt` 取得對應 DOM node。
7.	`getByTitle`	`getAllByTitle`	依據屬性 `title` 取得對應 DOM node。
8.	`getByTestId`	`getAllByTestId`	依據自定義屬性 `data-testid` 取得對應 DOM node。

Priority Query Order: 依據使用者操作情境，作為使用 queries 方法的優先順序建議。
如果有特定條件取得指定 DOM node，可以使用上述方法的第二個參數做自定義。

getAllBy**

如果有符合條件的 DOM node，返回 array。
如果沒有符合條件，返回 Error。

以 getAllByRole 為例：我的 component 有一個列表內容。

export default function Hobbies({hobbies}: {hobbies: string[]}){
    return(
        <ul>
            {hobbies.map(item => (
                <li key={item}>{item}</li>
            ))}
        </ul>
    )
}

撰寫測試：

import { render, screen } from "@testing-library/react";
import Hobbies from "./hobbies";

describe("Hobbies", () => {
    // 檢查 <ul> 單一節點
    test("Render List correctlly!", () => {
        const hobbies = ["Sleeping", "Cooking", "Eating"];
        render(<Hobbies hobbies={hobbies}/>);

        const listEl = screen.getByRole("list");
        expect(listEl).toBeInTheDocument();
    })

    // 檢查 <li> 多個節點
    test("Render Listitems correctlly!", () => {
        const hobbies = ["Sleeping", "Cooking", "Eating"];
        render(<Hobbies hobbies={hobbies}/>);

        const listItemElements = screen.getAllByRole("listitem");
        expect(listItemElements).toHaveLength(hobbies.length);
    })
})

測試結果：
PASS src/components/hobbies/hobbies.test.tsx
Hobbies
✓ Render List correctlly! (28 ms)
✓ Render Listitems correctlly! (9 ms)

Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 0.448 s, estimated 1 s